<template>
  <div>
    <div ref="echartsContainer" style="height: 500px; width: 100%"></div>
  </div>
</template>

<script>
import Echarts from '@/utils/echarts'
import axios from 'axios'
const mydata3 = ['2023-01', '2023-02', '2023-03', '2023-04', '2023-05', '2023-06', '2023-07', '2023-08', '2023-09', '2023-10', '2023-11', '2023-12']
const mydata4 = [0.021, -0.024, 0.036, 0.045, -0.041, 0.017, 0.028, -0.027, 0.019, -0.029, 0.033, 0.044]
const mydata5 = [0.021, -0.024, 0.026, 0.045, -0.041, 0.027, 0.038, 0.017, 0.009, -0.029, -0.033, 0.044]

export default {
  name: 'Radar',
  props: {
    data: {
      type: Array,
      default: null
    }
  },
  mounted () {
    var myChart = Echarts.init(this.$refs.echartsContainer)
    axios.get('/data.json').then((rawData) => {
      // console.log(222222, rawData)
      // var data = splitData(rawData.data)
      // console.log(data)
      myChart.setOption(
        {
          animation: false,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            },
            borderWidth: 1,
            borderColor: '#ccc',
            padding: 10,
            textStyle: {
              color: '#000'
            },
            position: function (pos, params, el, elRect, size) {
              const obj = {
                top: 10
              }
              obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30
              return obj
            }
            // extraCssText: 'width: 170px'
          },
          axisPointer: {
            link: [
              {
                xAxisIndex: 'all'
              }
            ],
            label: {
              backgroundColor: '#777'
            }
          },
          legend: {
            data: ['策略收益', '基准收益']
          },
          // toolbox: {
          //   feature: {
          //     dataZoom: {
          //       yAxisIndex: false
          //     },
          //     brush: {
          //       type: ['lineX', 'clear']
          //     }
          //   }
          // },
          grid: [
            {
              left: '5%',
              right: '2%',
              height: '80%'
            }
          ],
          xAxis: [
            {
              type: 'category',
              data: mydata3,
              boundaryGap: ['20%', '20%'],
              axisLine: { onZero: false },
              splitLine: { show: true },
              min: 'dataMin',
              max: 'dataMax',
              axisPointer: {
                z: 100
              },
              axisLabel: {
                fontSize: 10
              }
            }
          ],
          yAxis: [
            {
              scale: true,
              splitArea: {
                show: true
              },
              axisLabel: {
                formatter: function (val) {
                  return (val * 100).toFixed(1) + '%'
                }
              },
              axisPointer: {
                label: {
                  formatter: function (params) {
                    return ((params.value) * 100).toFixed(1) + '%'
                  }
                }
              }
            }
          ],
          series: [
            {
              name: '策略收益',
              type: 'bar',
              data: mydata4,
              label: {
                show: true,
                position: 'top',
                formatter: function (params) {
                    return ((params.value) * 100).toFixed(1) + '%'
                }
              }
            },
            {
              name: '基准收益',
              type: 'bar',
              data: mydata5,
              label: {
                show: true,
                position: 'top',
                formatter: function (params) {
                    return ((params.value) * 100).toFixed(1) + '%'
                }
              }
            }
          ]
        }
      )
    })
  }
}
</script>

<style scoped></style>
